<template>
  <div class="reportPage">
    <div class="tab">
      <div
        class="tabBtn"
        :class="{ active: activeId === 3 }"
        @click="reportTypeClick(3)"
      >
        种子
      </div>
      <div
        class="tabBtn"
        :class="{ active: activeId === 0 }"
        @click="reportTypeClick(0)"
      >
        土壤
      </div>
      <div
        class="tabBtn"
        :class="{ active: activeId === 1 }"
        @click="reportTypeClick(1)"
      >
        水质
      </div>
      <div
        class="tabBtn"
        :class="{ active: activeId === 2 }"
        @click="reportTypeClick(2)"
      >
        农作物
      </div>
    </div>
    <div class="reportList">
      <div
        class="waterReport"
        v-for="(item, index) in 5"
        @click="toShow()"
        :key="index"
      >
        <div class="water-l">
          <img src="../assets/waterReport.png" alt="" />
        </div>
        <div class="water-r">
          <div class="tit">
            <div class="name">{{ nameText[activeId + 1] }}检测报告{{index + 1}}</div>
            <div class="tag" @click="openReport(item.pdf)">查阅</div>
          </div>
          <!-- <div class="waterText">中国质量认证中心</div> -->
          <div class="waterText">颁发日期：2023/07/14</div>
          <div class="waterText">报告编号：{{ 738490273 + item }}</div>
        </div>
      </div>
    </div>
    <!-- <div class="reportList" v-if="activeId === 0 || activeId === 1">
      <div
        class="waterReport"
        v-for="(item, index) in reportList"
        :class="{ highlighted: isHighlighted(item) }"
        @click="addReport(item)"
        :key="index"
      >
        <div class="water-l" @click="openReport(item.pdf)">
          <img src="../assets/waterReport.png" alt="" />
        </div>
        <div class="water-r">
          <div class="tit">
            <div class="name">{{ item.reportName }}</div>
            <div class="tag" @click="openReport(item.pdf)">查阅</div>
          </div>
          <div class="waterText">{{ item.inspectionInstitution }}</div>
          <div class="waterText">颁发日期：{{ item.samplingTime }}</div>
          <div class="waterText">报告编号：{{ item.reportId }}</div>
        </div>
      </div>
    </div>
    <div class="reportList" v-else>
      <div
        class="waterReport"
        v-for="(item, index) in pesticideReportList"
        :class="{ highlighted: pesticideIsHighlighted(item) }"
        @click="pesticideAddReport(item)"
        :key="index"
      >
        <div class="water-l" @click="openReport(item.pdf)">
          <img src="../assets/waterReport.png" alt="" />
        </div>
        <div class="water-r">
          <div class="tit">
            <div class="name">{{ item.name }}</div>
            <div class="tag" @click="openReport(item.pdf)">查阅</div>
          </div>
          <div class="waterText">{{ item.company }}</div>
          <div class="waterText">颁发日期：{{ item.time }}</div>
          <div class="waterText">报告编号：{{ item.numbering }}</div>
        </div>
      </div>
    </div>
    <div class="loader" v-show="loader"></div>
    <div
      class="none"
      v-if="
        reportList.length === 0 &&
        pesticideReportList.length === 0 &&
        loader === false
      "
    >
      <img src="./../assets/Group 179.png" alt="" />
      <div class="noneTest">暂无检测报告</div>
    </div> -->

    <!-- <div class="submit" @click="submit()">确定</div> -->
     <van-image-preview v-model="show" :startPosition="showIndex" :images="images">
    </van-image-preview>
  </div>
</template>

<script>import { Toast } from 'vant'
import { getReportListApi, getPesticideReportListApi } from '@/api/tracing.js'
export default {
  name: 'ShuzhongtianH5Report',

  data () {
    return {
      reportList: [],
      pesticideReportList: [],
      activeId: 3,
      selectedReportList: [], // 水质土壤选择
      pesticideSelectedReportList: [], // 农残选择
      reportParams: {
        baseId: '',
        current: 1,
        pageSize: 20,
        reportType: ''
      },
      pesticideReportParams: {
        baseId: '',
        current: 1,
        pageSize: 20
      },
      loader: false,
      suyuanData: {},
      baseId: null,
      tsId: null,
      ids: null,
      nameText: {
        1: '土壤',
        2: '水质',
        3: '农作物',
        4: '种子'
      },
      show: false,
      showIndex: 0,
      images: [
        require('@/assets/report/Page0001.jpg')
      ]
    }
  },

  mounted () {
    this.baseId = this.$route.query.baseId
    this.tsId = this.$route.query.tsId
    this.userId = this.$route.query.userId
    this.reportParams.baseId = this.$route.query.baseId
    this.pesticideReportParams.baseId = this.$route.query.baseId
    // this.reportTypeClick(0)
    this.suyuanData = this.$store.state.editData
    this.selectedReportList = this.$store.state.report.reportList // 选择列表回显
    this.pesticideSelectedReportList = this.$store.state.report.pesticideReportList // 选择列表回显
    // window.history.pushState(null, null, document.URL)
    // window.addEventListener('popstate', this.onBrowserBack, false)
  },
  // beforeDestroy () {
  //   // 在组件销毁前移除监听器，避免内存泄漏
  //   window.removeEventListener('popstate', this.onBrowserBack, false)
  // },
  methods: {
    // 查看报告
    toShow () {
      this.show = true
      switch (this.activeId) {
        case 3:
          this.showIndex = 0
          break
      }
    },
    // 处理返回按钮点击事件
    // onBrowserBack () {
    //   window.history.pushState(null, null, document.URL)
    //   Dialog.confirm({
    //     message: '您的修改还未提交，确定返回吗？'
    //   })
    //     .then(() => {
    //       this.$router.push({ path: `/edit?tsId=${this.tsId}&baseId=${this.baseId}&userId=${this.userId}` })
    //       console.log(1)
    //     })
    //     .catch(() => {
    //       // on cancel
    //     })
    // },
    // 将已拥有的报告回显
    showReport () {
      this.ids = (this.$store.state.editData.waterids + ',' + this.$store.state.editData.soilids).split(',')
      const reportArr = this.reportList
      this.selectedReportList.push(...reportArr.filter(obj => this.ids.includes(obj.id.toString())))
      // console.log(reportArr.filter(obj => this.ids.includes(obj.id.toString())))
      console.log(this.selectedReportList)
    },
    reportTypeClick (val) {
      this.reportList = []
      this.pesticideReportList = []
      this.activeId = val
      this.loader = true
      // if (val === 0 || val === 1) {
      //   this.getReportList(val)
      // } else if (val === 2) {
      //   this.getPesticideReportList()
      // }
    },
    // 报告列表
    async getReportList (val) {
      this.reportParams.reportType = val
      const res = await getReportListApi(this.reportParams)
      // console.log(res)
      this.reportList = res.data.records
      this.loader = false
      if (this.ids === null) {
        this.showReport()
      }
    },
    // 农残检测
    async getPesticideReportList () {
      const res = await getPesticideReportListApi(this.pesticideReportParams)
      // console.log(res)
      this.pesticideReportList = res.data.records
      this.loader = false
      if (this.ids === null) {
        this.showReport()
      }
    },
    // 土壤水质选择报告
    addReport (option) {
      const index = this.selectedReportList.findIndex(
        (item) => item.id === option.id
      )
      if (index !== -1) {
        this.selectedReportList.splice(index, 1)
      } else {
        this.selectedReportList.push(option)
      }
    },
    // 土壤水质高亮
    isHighlighted (option) {
      if (
        Object.keys(option).length !== 0 &&
        this.selectedReportList.length !== 0
      ) {
        return this.selectedReportList.some((item) => item.id === option.id)
      }
    },
    // 农残选择报告
    pesticideAddReport (option) {
      const index = this.pesticideSelectedReportList.findIndex(
        (item) => item.id === option.id
      )
      if (index !== -1) {
        this.pesticideSelectedReportList.splice(index, 1)
      } else {
        this.pesticideSelectedReportList.push(option)
      }
    },
    // 农残高亮
    pesticideIsHighlighted (option) {
      if (
        Object.keys(option).length !== 0 &&
        this.pesticideSelectedReportList.length !== 0
      ) {
        return this.pesticideSelectedReportList.some(
          (item) => item.id === option.id
        )
      }
    },
    // 农残
    openReport (pdf) {
      window.open(pdf, '_blank')
    },
    // 提交
    submit () {
      // 水质土壤
      const waterids = []
      const soilids = []
      this.selectedReportList.forEach((item) => {
        if (item.reportType === '0') {
          soilids.push(item.id)
        } else if (item.reportType === '1') {
          waterids.push(item.id)
        }
      })
      this.suyuanData.waterids = waterids.join(',')
      this.suyuanData.soilids = soilids.join(',')
      // 农残
      const pesticideids = []
      this.pesticideSelectedReportList.forEach((item) => {
        pesticideids.push(item.id)
      })
      this.suyuanData.pesticideids = pesticideids.join(',')
      this.$store.commit('setEditData', this.suyuanData)
      this.$store.commit('setReportList', this.selectedReportList)
      this.$store.commit(
        'setPesticideReportList',
        this.pesticideSelectedReportList
      )
      Toast.success('提交成功')
      setTimeout(() => {
        this.$router.push({
          path: `/edit?tsId=${this.tsId}&baseId=${this.baseId}`
        })
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.reportPage {
  width: 375px;
  min-height: 100vh;
  padding: 16px;
  background: #f6f8fc;
}
.tab {
  display: flex;
  margin-bottom: 20px;
  .tabBtn {
    height: 24px;
    margin-right: 10px;
    text-align: center;
    line-height: 24px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 12px;
    background: #fff;
  }
  .active {
    border: 1px solid #19b560;
    background: #19b560;
    color: #fff
  }
}
.reportList {
  width: 343px;
  // max-height: 88vh;
  padding-bottom: 20px;
  overflow-y: auto;
  // background: #ffffff;
  border-radius: 8px 8px 8px 8px;
}
.highlighted {
  border: 1px solid #19b560 !important;
  background: #fff url("./../assets/Group 266 (1).png") no-repeat right 0vw !important;
}
.waterReport {
  width: 343px;
  height: 128px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px #e8f8ef;
  border: 1px solid transparent;
  margin-bottom: 12px;

  border-radius: 8px;
  display: flex;
  padding: 12px;

  .water-l {
    width: 80px;
    height: 100px;
    border-radius: 4px;
    border: 1px solid #e8f8ef;
    margin-right: 12px;

    img {
      width: 80px;
      height: 100px;
    }
  }

  .water-r {
    height: 100px;

    .tit {
      display: flex;
      align-items: center;
      margin-bottom: 6px;

      .name {
        font-weight: 500;
        font-size: 16px;
        color: #0a241b;
        margin-right: 8px;
      }

      .tag {
        width: 35px;
        height: 20px;
        background: #19b560;
        border-radius: 4px;
        font-weight: 400;
        font-size: 12px;
        transform: scale(0.8);
        color: #ffffff;
        line-height: 20px;
        text-align: center;
      }
    }

    .waterText {
      font-weight: 400;
      font-size: 12px;
      color: #71807b;
      margin-bottom: 9px;
    }
  }
}
.none {
  text-align: center;
  margin-top: 30px;

  img {
    width: 213px;
    height: 228px;
  }
  .noneTest {
    margin-top: -100px;
    color: #71807b;
  }
}
.submit {
  width: 343px;
  height: 44px;
  background: #19b560;
  border-radius: 8px 8px 8px 8px;
  text-align: center;
  line-height: 44px;
  color: #fff;
  position: absolute;
  bottom: 44px;
}
//加载动画
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%, #19b560) content-box;
  -webkit-mask: repeating-conic-gradient(
      #0000 0deg,
      #000 1deg 20deg,
      #0000 21deg 36deg
    ),
    radial-gradient(
      farthest-side,
      #0000 calc(100% - var(--b) - 1px),
      #000 calc(100% - var(--b))
    );
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation: l4 1s infinite steps(10);
  position: absolute;
  left: 50%;
  margin-left: -25px;
}
@keyframes l4 {
  to {
    transform: rotate(1turn);
  }
}
</style>
